<!--
 * @Descripttion: 设备状态
 * @LastEditors: xzh
 * @LastEditTime: 2024-04-21 18:56:48
-->
<template>
  <el-card>
    <template #header>
      <span>{{ $t(`page.equipManageArr.equipState`) }}</span>
    </template>
    <!-- 设备异常信息列表 -->
    <el-col :span="8" v-loading="loading">
      <div class="equipState-tools">
        <span>{{
          $t(
            "page.dashboardManageArr.afterSaleDashboardArr.equipStateArr.abnormalInfo"
          )
        }}</span>
      </div>
      <div>
        <vxe-table
          :data="equipStateParam.equipAbnormalArr"
          height="100%"
          :scroll-y="{ gt: 50, enabled: true }"
          show-overflow
          show-header-overflow
          border
        >
          <vxe-column type="seq" :title="$t('table.seq')" width="50" />
          <vxe-column
            v-for="column in AfterSaleUtils.tableColumnMap.abnormalInfo"
            :key="column.field"
            :field="column.field"
            :title="$t(column.title)"
            :width="column.width || ''"
          />
        </vxe-table>
      </div>
    </el-col>
    <!-- 设备故障分布 -->
    <el-col class="col-faultSpread" :span="8" v-loading="loading">
      <div class="equipState-tools">
        <span>{{
          $t(
            "page.dashboardManageArr.afterSaleDashboardArr.equipStateArr.faultSpread"
          )
        }}</span>
        <el-select v-model="equipStateParam.dateType" size="small">
          <el-option
            v-for="dateType in equipStateParam.dateTypeArr"
            :key="dateType"
            :label="$t(`common.dateTypeArr.${dateType}`)"
            :value="dateType"
          />
        </el-select>
      </div>
      <DileTable>
        <template #preColumn>
          <vxe-column
            v-for="column in AfterSaleUtils.tableColumnMap.faultSpread"
            :key="column.field"
            :field="column.field"
            :title="$t(column.title)"
            :width="column.width || ''"
          />
        </template>
      </DileTable>
    </el-col>
    <el-col :span="8" v-loading="loading">
      <div class="equipState-tools">
        <span>{{
          $t(
            "page.dashboardManageArr.afterSaleDashboardArr.equipStateArr.warningChart"
          )
        }}</span>
      </div>
      <!-- 设备报警图表 -->
      <DileChart ref="warningChartRef" :chart="equipStateParam.warningChart" />
    </el-col>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, provide, watch, toRefs } from "vue";
import { propsParam_Inf } from "@/components/dile-table/index.type";
import type { object_Inf } from "@/utils/typings/index.type";
import AfterSaleUtils from "../afterSale-utils";
import DileTable from "@/components/dile-table/index.vue";
import DileChart from "@/components/dile-chart/index.vue";
import Dile_Methods from "@/utils/methods";

const props = defineProps({
  dataMap: {
    type: Object,
    requited: true,
    default: {},
  },
  loading: {
    type: Boolean,
    requited: true,
    default: false,
  },
});
/**
 * @Author: xzh
 * @Descripttion: 设备报警图表实例
 * @Param:
 */
let warningChartRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 设备状态参数
 * @Param:
 */
let equipStateParam = reactive<object_Inf>({
  dateType: "day",
  dateTypeArr: ["day", "week", "month", "year"],
  //设备异常数据源
  equipAbnormalArr: [],
  //设备报警图表
  warningChart: {},
});
/**
 * @Author: xzh
 * @Descripttion:监听值修改
 * @Param:
 */
watch(
  () => props.dataMap,
  () => {
    Object.keys(props.dataMap || {}).length > 0 && initEquipSate();
  }
);
/**
 * @Author: xzh
 * @Descripttion: 加载设备状态
 * @Param:
 */
let initEquipSate = () => {
  let { equipAbnormalArr, warningChart } = toRefs(equipStateParam),
    { equipAbnormal, equipFaultSpread, equipWarning } = props.dataMap;
  //设备异常信息赋值
  equipAbnormalArr.value = equipAbnormal;
  //设备故障信息赋值
  Object.assign(propsParam, {
    tableData: equipFaultSpread,
  });
  //设备报警图表信息
  warningChart.value = AfterSaleUtils.getEquipWarningChart(equipWarning);
  warningChartRef.value.init();
};

/**
 * @Author: xzh
 * @Descripttion: 表格参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf>({
  isPagination: true,
  loading: false,
  tableData: [],
  tableRecords: 0,
  pageLayouts: ["PrevPage", "JumpNumber", "NextPage"],
  maxHeight: 300,
});
provide("propsParam", propsParam);
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
  > .el-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    > div:not(.el-loading-mask) {
      flex: 1;
      height: 0;
      &:is(.equipState-tools) {
        flex: 1.5rem 0 0;
      }
    }
  }
  .col-faultSpread {
    > div {
      display: flex;
      justify-content: space-between;
      .el-select {
        width: 3rem;
      }
    }
  }
}
</style>
